<template>
  <div class="three">
    <dv-border-box-8 class="mapbox" style="width:870px;height:550px;">
      <Bydmap class="bydmap"></Bydmap>
      <h4 class="bydmaptitle">比亚迪宋PLUS DM-i</h4>
    </dv-border-box-8>

    <dv-border-box-8 class="mapbox" :reverse="true" style="width:870px;height:550px;">
      <Tslmap class="tslmap"></Tslmap>
      <h4 class="tslmaptitle">特斯拉Model Y</h4>
    </dv-border-box-8>

    <Loc1></Loc1>
    <Loc2></Loc2>

    <dv-border-box-3 style="width: 800px;height: 500px;">
      <dv-border-box-9 style="color:orange;" class="title">TOP5 热销省份</dv-border-box-9>
      <div class="t5probox">
        <dv-capsule-chart :config="bydt5pro" style="width:350px; height:350px;" />
        <dv-capsule-chart :config="tslt5pro" style="width:350px; height:350px;" />
      </div>
      <h4 class="bydt5title">比亚迪宋PLUS DM-i</h4>
      <h4 class="tslt5title">特斯拉Model Y</h4>
    </dv-border-box-3>
  </div>
</template>

<script>
import Loc1 from '@/components/loc/Loc1.vue'
import Loc2 from '@/components/loc/Loc2.vue'
import Bydmap from '@/components/All/map/Bydmap.vue'
import Tslmap from '@/components/All/map/Tslmap.vue'
export default {
  components: {
    Loc1,
    Loc2,
    Bydmap,
    Tslmap,
  },
  data() {
    return {
      bydt5pro: {
        data: [
          {
            name: '广东',
            value: 448
          },
          {
            name: '山东',
            value: 167
          },
          {
            name: '河南',
            value: 158
          },
          {
            name: '江苏',
            value: 152
          },
          {
            name: '浙江',
            value: 145
          },
        ],
        unit: '总计',
        showValue: true
      },
      tslt5pro: {
        data: [
          {
            name: '广东',
            value: 135
          },
          {
            name: '浙江',
            value: 97
          },
          {
            name: '上海',
            value: 91
          },
          {
            name: '江苏',
            value: 90
          },
          {
            name: '北京',
            value: 62
          },
        ],
        unit: '总计',
        showValue: true
      }
    }
  },
}
</script>

<style lang="less" scoped>
body {
  position: relative;
}
.dv-border-box-3 {
  position: absolute;
  top: 630px;
  left: 540px;
}
.three {
  width: 1897px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bydmaptitle,.tslmaptitle {
  color: white;
  position: absolute;
  top: 50px;
  left: 335px;
}
.mapbox {
  position: relative;
  margin-bottom: 520px;
}
.title {
  margin: auto;
  margin-top: 20px;
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
} 
.t5probox {
  position: relative;
  display: flex;
  justify-content: space-around;
  .dv-capsule-chart {
    margin-top: 40px;
  }
}
h4 {
  color: orange;
}
.bydt5title {
  position: absolute;
  top: 35px;
  left: 70px;
}
.tslt5title {
  position: absolute;
  top: 35px;
  right: 75px;
}
.bydmap ,.tslmap{
  margin: auto;
  padding-top: 50px;
    
}
</style>